<!DOCTYPE html>
<html lang="en">
<head>

    <title>位置定位</title>
    <#include "/include/header.ftl">
    <link rel="stylesheet" href="/static/css/ContentSytle.css">


    <!--树形菜单引用-->
    <link rel="stylesheet" type="text/css"  href="/static/js/X-admin/lib/ztree-select-search/css/bootstrapStyle/bootstrapStyle.css" />
    <link rel="stylesheet" type="text/css" href="/static/js/X-admin/lib/ztree-select-search/css/zTreeSelect.css" />
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/jquery.ztree.exhide.min.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/js/zTreeSelect.js"></script>
    <script type="text/javascript" src="/static/js/X-admin/lib/ztree-select-search/TreeSelect.js"></script>



</head>
<body class="tablebody">
<div class="Container">
    <!--表格内容-->
    <div class="TableCont">
        <div class="TableColme">
            <form class="layui-form" action="">
                <button type="button" class="btn-min btn-Orange btn-left" id='daoru'>导入</button><!--新增 end-->
                <!--搜索-->
                <div class="tableSearch">
                    <input type="search" id="TableSearch" class="layui-input" placeholder="单号"/>
                    <button type="button" id="SearchBtn">搜索</button>
                </div>
                <!--搜索 end-->
            </form>
            <div class="tableOperating" id="tableOperating">
                <h3>操作</h3>
                <div class="OperatingList" id="OperatingList">
                    <ul>
                        <li><h3><a href="javascript:;" id="daochu">导出</a></h3></li>
                    </ul>
                </div>
            </div>

            <!--表格字段显示选择-->
            <div class="TableRow">
                <a href="javascript:;">显示字段</a>

            </div>
            <!--表格字段显示选择 end-->


            <!--表格独立分页 -->
            <div class="tablePage" id="TablePage"></div>
            <!--表格独立分页-->


        </div>
        <!--表格数据-->
        <table class="layui-table layui-hide"  lay-even="" lay-skin="row" id="TableData" lay-filter="TableData"></table>
        <!--表格数据 end-->

    </div>
    <!--表格内容 end-->
</div>
<#include "/include/footer.ftl">

<!--表格操作-->
<script type="text/html" id="barCaozuo">
    <a lay-event="xiangqing">详情</a>
</script>
<!--表格操作 end-->

<script type="text/javascript">
    layui.use(['laydate','table','laypage','form'], function(){
        var table = layui.table;laydate = layui.laydate;form = layui.form;laypage = layui.laypage;
        var heightTable= $('.page-content', window.parent.document).outerHeight(true)-145;
        //表格数据
        table.render({
            elem: '#TableData'
            ,height: heightTable
            ,limit:30
            , even:true
            ,toolbar: 'filter'
            ,defaultToolbar: ['filter']
            ,page:{
                limit:30//每页显示条数
                ,layout: ['count','prev','skip','next', 'refresh']
                ,prev: '<em>◀</em>'
                ,next: '<em>▶</em>'
            }
            ,cols: [[
                //表头
                {type:'checkbox',width:40}
                ,{field:'caozuo',title:'操作',width:50,toolbar: '#barCaozuo',align:'center'}
                ,{field:'danhao',title:'单号',width:200}
                ,{field:'kashu',title:'卡数',width:200}
                ,{field:'chenggong',title:'成功'}
                ,{field:'shibai',title:'失败'}
                ,{field:'beizhu',title:'备注',width:140}
                ,{field:'shijian',title:'创建时间'}
            ]]
            ,data:[
                //表格数据
                {
                    "danhao":'XF201903202210',
                    "kashu":'100',
                    "chenggong":'97',
                    "shibai":'<a lay-event="xiangqing"  class="current">3</a>',
                    "beizhu":'广西',
                    "shijian":'2018-01-24 16:25:16'
                },
                {
                    "danhao":'XF201903202210',
                    "kashu":'100',
                    "chenggong":'97',
                    "shibai":'<a lay-event="xiangqing"  class="current">3</a>',
                    "beizhu":'广西',
                    "shijian":'2018-01-24 16:25:16'
                },
                {
                    "danhao":'XF201903202210',
                    "kashu":'100',
                    "chenggong":'97',
                    "shibai":'<a lay-event="xiangqing"  class="current">3</a>',
                    "beizhu":'广西',
                    "shijian":'2018-01-24 16:25:16'
                },
                {
                    "danhao":'XF201903202210',
                    "kashu":'100',
                    "chenggong":'97',
                    "shibai":'<a lay-event="xiangqing"  class="current">3</a>',
                    "beizhu":'广西',
                    "shijian":'2018-01-24 16:25:16'
                }

            ]
        });



        //搜索框点搜索
        $('#SearchBtn').click(function () {
            layer.msg('暂无数据！')
        });

        //搜索框回车搜索
        $("#TableSearch").keypress(function (e) {
            layer.msg('暂无数据！')
        });


        laydate.render({elem: '#Time-jh',format: 'yyyy.MM.dd',range: '-'});//激活时间

        //表格行操作
        table.on('tool(TableData)', function(obj){
            var data = obj.data;
            if(obj.event === 'xiangqing'){
                //审核
                var source = layui.table.cache['TableData']; //获取所有表格数据
                top.layer.open({
                    type: 1,
                    fix: false, //不固定
                    maxmin: true,
                    move: false,
                    area: ['900px','500px;'],
                    btnAlign: 'r',
                    skin: 'layerOpen',
                    shade: 0.2,
                    title: '查看详情',//弹窗标题
                    content: '' +
                        '<div class="layerTableCont2" >' +
                        //搜索筛选条件
                        '<div class="TableColme">' +
                        '<form class="layui-form" action="">' +
                        '<div class="tableSearch">' +
                        '<input type="search" id="TableSearch" class="layui-input" placeholder="卡号，ICCID"/>' +
                        '<button type="button" id="SearchBtn">搜索</button>' +
                        '</div>' +
                        '<div class="tableFilter" id="tableFilter">' +
                        '<a href="javascript:;" class="tit">筛选器</a>' +
                        '<div class="FilterCont" id="FilterCont2">' +
                        '<ul>' +
                        '<li>' +
                        '<div class="title">状态</div>' +
                        '<div class="inputCont select" >' +
                        '<select>' +
                        '<option value="全部">全部</option>' +
                        '<option value="已激活">已激活</option>' +
                        '<option value="未激活">未激活</option>' +
                        '</select>' +
                        '</div>' +
                        '</li>' +
                        '<li>' +
                        '<div class="title">同步结果</div>' +
                        '<div class="inputCont select" >' +
                        '<select>' +
                        '<option value="全部">全部</option>' +
                        '<option value="成功">成功</option>' +
                        '<option value="失败">失败</option>' +
                        '</select>' +
                        '</div>' +
                        '</li>' +
                        '<li>' +
                        '<div class="title">同步时间</div>' +
                        '<div class="inputCont"><input type="text" class="layui-input Time" id="Time-cz" placeholder="请选择时间段" autocomplete="off"></div>' +
                        '</li>' +
                        '</ul>' +
                        '<div class="FilterBtnCont">' +
                        '<button type="reset" class="btn-min btnNone" id="FilterClearBtn">清除</button>' +
                        '<button type="reset" class="btn-min" id="FilterCancelBtn">取消</button>' +
                        '<button type="button" class="btn-min btn-Orange" id="FilterBtn">筛选</button>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</form>'+
                        '<div class="tableOperating" id="tableOperating">'+
                        '<h3>操作</h3>'+
                        '<div class="OperatingList" id="OperatingList">'+
                        '<ul>'+
                        '<li>'+
                        '<h3><a href="javascript:;" id="csdw">重试定位</a></h3>'+
                        '</li>'+
                        '<li>'+
                        '<h3><a href="javascript:;" id="daochu">导出</a></h3>'+
                        '</li>'+
                        '</ul>'+
                        '</div>'+
                        '</div>'+
                        '</form>'+
                        '</div> ' +
                        //搜索筛选条件end

                        '<div class="TableCont" style="position:relative; height: 361px;">' +
                        '<table class="layui-table layui-hide"  lay-even="" lay-skin="row" id="TableInfo" lay-filter="TableInfo"></table>' +
                        '</div>' +
                        '</div>',
                    success: function (layero, index) {
                        top.form.render();
                        //导出
                        top.$('#daochu').click(function () {
                            top.layer.open({
                                type: 1,
                                fix: false, //不固定
                                maxmin: true,
                                move: false,
                                area: '450px',
                                btnAlign: 'r',
                                skin: 'layerTips',
                                shade: 0.2,
                                title: false,
                                closeBtn: 0,
                                content: "" +
                                    "<div class='layerOpenCont'>" +
                                    "<div class='Layer-txt'>" +
                                    "<h3>您确定要导出数据吗？</h3>" +
                                    "<p>因导出的数据量过大导致运行缓慢，请耐心等待</p>" +
                                    "</div>" +
                                    "</div>",
                                btn: ['取消', '确定'],
                                btn2: function () {
                                    top.successBtn('导出成功','您导出的文件太大，已生成下载任务，请稍后在下载列表里下载导出文件');
                                    return false
                                }

                            })
                        });

                        //设为特定卡
                        top.$('#csdw').click(function () {
                            top.success('定位成功');
                            /*var checkStatus = top.table.checkStatus('TableInfo'), data = checkStatus.data;
                            if(data == 0){
                                top.layer.msg('请先选择数据，在进行操作！')
                            }else {
                                top.success('定位成功');

                                //top.successBtn('定位失败','网络异常');
                            }*/

                        });



                        top.laydate.render({elem: '#Time-cz', format: 'yyyy.MM.dd',range: '-'});//创建时间
                        //筛选器检索
                        top.$('#FilterBtn').click(function () {
                            top.$('.tableFilter').removeClass('open');
                            top.layer.msg('暂无数据！');
                        });

                        //搜索框点搜索
                        top.$('#SearchBtn').click(function () {
                            top.layer.msg('暂无数据！')
                        });
                        //搜索框回车搜索
                        top.$("#TableSearch").keypress(function (e) {
                            top.layer.msg('暂无数据！')
                        });


                        var tableIns = top.table.render({
                            elem: '#TableInfo'
                            , limit: 30
                            , even: true
                            ,height:360
                            ,page:{
                                limit:30//每页显示条数
                                ,layout: ['count','prev','skip','next', 'refresh']
                                ,prev: '<em>◀</em>'
                                ,next: '<em>▶</em>'
                                ,theme:'Pageright'
                            },
                            cols: [[
                                //表头
                                {type: 'checkbox',width: 40}
                                ,{field: 'kahao', title: '卡号', width: 100}
                                , {field: 'ICCID', title: 'ICCID', width: 150}
                                , {field: 'zhuangtai', title: '状态'}
                                , {field: 'jieguo', title: '同步结果'}
                                , {field: 'weizhi', title: '位置'}
                                , {field: 'yuanyin', title: '失败原因'}
                                , {field: 'shijian', title: '同步时间', width: 150}

                            ]]
                            , data: [
                                {
                                    "kahao": '861064',
                                    "ICCID": '8986061905001',
                                    "zhuangtai": '已激活',
                                    "jieguo": '成功',
                                    "weizhi": '深圳',
                                    "yuanyin": '',
                                    "shijian": '2018-01-24 16:25:16'
                                },
                                {
                                    "kahao": '861064',
                                    "ICCID": '8986061905001',
                                    "zhuangtai": '已激活',
                                    "jieguo": '失败',
                                    "weizhi": '深圳',
                                    "yuanyin": '网络异常',
                                    "shijian": '2018-01-24 16:25:16'
                                },
                                {
                                    "kahao": '861064',
                                    "ICCID": '8986061905001',
                                    "zhuangtai": '已激活',
                                    "jieguo": '失败',
                                    "weizhi": '深圳',
                                    "yuanyin": '网络异常',
                                    "shijian": '2018-01-24 16:25:16'
                                }
                            ]
                        });
                        top.table.reload('TableInfo', tableIns);



                    }

                });

            }
        });

        //导入
        $('#daoru').click(function () {
            top.layer.open({
                type:1,
                fix: false, //不固定
                maxmin: true,
                move:false,
                area:'500px',
                btnAlign: 'r',
                skin:'layerOpen',
                shade:0.2,
                title: '导入',//弹窗标题
                content: '' +
                    '<form class="layui-form" action="">' +
                    '<div class="layerOpenCont">' +
                    '<div class="layerForm">' +
                    '<ul>' +
                    '<li>' +
                    '<div class="title">选择文件</div>' +
                    '<div class="inputCont">' +
                    '<div class="input-file">' +
                    '<input type="text" class="fileinput"  name="file" placeholder="点击选择文件"  onfocus="this.blur()" />' +
                    '<input type="file" class="fileSel" style="display: none" name="fileinput"></div> ' +
                    '</div>' +
                    '<div class="contOther"><a href="/static/images/checkbox-disbaled.png" target="_blank">下载模板</a></div> ' +
                    '</li>' +
                    '<li ><div class="title">备注</div><div class="inputCont"><input class="layui-input" placeholder="请输入备注" name="beizhu"/></li>' +
                    '</ul>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-layer-btn layui-layer-btn-r">' +
                    '<button class="btn-min layui-layer-btn0" type="button" onclick="top.closeBtn()">取消</button>' +
                    '<button class="btn-min layui-layer-btn1" lay-submit="" lay-filter="submitBtn">确定</button>' +
                    '</div>' +
                    '</form>',
                success: function(layero, index){
                    top.form.render();//弹窗后初始化表单样式
                    //上传文件弹窗
                    top.$('.fileinput').click(function () {
                        top.$(".fileSel").trigger("click");
                    });
                    top.$('.fileSel').change(function () {
                        var fileUrl=$(this).val();
                        top.$('.fileinput').val(fileUrl)
                    });


                    //提交表单
                    top.form.on('submit(submitBtn)', function (data) {
                        if(top.$('input[name=fileinput]').val()==''){
                            warning('请选择文件')
                        }else {
                            top.successBtn('导入成功','本次成功导入100张卡，成功90张，失败10张');
                        }
                        return false;
                    });


                }
            })

        });


        //导出
        $('#daochu').click(function () {
            top.layer.open({
                type:1,
                fix: false, //不固定
                maxmin: true,
                move:false,
                area:'450px',
                btnAlign: 'r',
                skin:'layerTips',
                shade:0.2,
                title:false,
                closeBtn:0,
                content: "" +
                    "<div class='layerOpenCont'>" +
                    "<div class='Layer-txt'>" +
                    "<h3>您确定要导出数据吗？</h3>" +
                    "<p>因导出的数据量过大导致运行缓慢，请耐心等待</p>" +
                    "</div>" +
                    "</div>",
                btn:['取消','确定'],
                btn2:function () {
                    top.successBtn('导出成功','您导出的文件太大，已生成下载任务，请稍后在下载列表里下载导出文件')//成功提示
                    return false
                }

            })

        })
    })
</script>
</body>
</html>
